/*
  学习目标：生命周期-挂载阶段
  步骤：
     1. constructor
     2. render
     3. componentDidMount
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 对标: vue中的created, 表示创建
  // 场景: 1. 初始state  2. 创建ref
  // 👎 几乎不用,
  // 💥 不在constructor中发请求获取数据
  constructor() {
    // 语法规则: super()表示继承父级所有的属性和方法, 不能省略
    super();
    // 👎 声明状态
    this.state = {
      count: 79,
    };
  }

  // 👍 简写
  // state = {
  //   count: 79
  // }

  // 💥 表示渲染JSX, 必须写的一个钩子函数
  render() {
    console.log('render  ----->  ');
    return (
      <div>
        App
        <h1>{this.state.count}</h1>
      </div>
    );
  }

  // 对标: vue中的mounted
  // 场景: 1.💥 发请求  2. 最先获取DOM元素 3. 监听事件/开启定时器等
  componentDidMount() {
    console.log('挂载完毕  ----->  ');
  }
}
